<template>
	<div class="page-control" v-show="listCount>0">
		<span class="pages">
			<el-button type="primary" size="mini" :disabled="disablePrev" @click="chnagePage('reduce')">上一页</el-button>
			页数：{{page}} / {{pageTotal}}
			<el-button type="primary" size="mini" :disabled="disableNext" @click="chnagePage('adds')">下一页</el-button>
		</span>
	</div>
</template>

<script>
export default {
	name: "pageControl",
	props:{
		page:{ type:Number, default:0 },//页码
		pageSize:{ type:Number, default:0 },// 每页数
		listCount:{ type:Number, default:0 },//记录数
	},
	date(){
		return {}
	},
	computed:{
		//计算总共页数
		pageTotal (){
			return Math.ceil(this.listCount/this.pageSize)
		},
		//上一页是否失效
		disablePrev(){
			return this.page < 2
		},
		//下一页是否失效
		disableNext(){
			return this.page >= this.pageTotal
		}
	},
	methods:{
		chnagePage(act){
			let _v = act == 'adds' ? this.page+1 : this.page -1
			// this.$emit('update:page',_v) //sync的方式
			//直接发送事件
			this.$emit('chnagepage',_v.toString()) //不能传Number类型，会报错，他妈的
		}
	}
}
</script>

<style lang="less" scoped>
	/*翻页控制*/
	.page-control {
		display: flex;align-items: center;justify-content: center;
		.pages {}
	}
</style>